<script setup>
import { ref, onMounted } from 'vue'

// 从 localStorage 加载数据或使用默认数据
const boards = ref([])
const newTask = ref({ title: '', description: '' })
const showAddForm = ref(false)
const selectedBoardId = ref(null)

onMounted(() => {
  const savedBoards = localStorage.getItem('kanban-boards')
  if (savedBoards) {
    boards.value = JSON.parse(savedBoards)
  } else {
    boards.value = [
      {
        id: 1,
        title: '待处理',
        tasks: []
      },
      {
        id: 2,
        title: '进行中',
        tasks: []
      },
      {
        id: 3,
        title: '已完成',
        tasks: []
      }
    ]
  }
})

// 保存到 localStorage 的辅助函数
const saveToLocalStorage = () => {
  localStorage.setItem('kanban-boards', JSON.stringify(boards.value))
}

const openAddForm = (boardId) => {
  selectedBoardId.value = boardId
  showAddForm.value = true
  newTask.value = { title: '', description: '' }
}

const addTask = () => {
  if (!newTask.value.title.trim()) return

  const targetBoard = boards.value.find(board => board.id === selectedBoardId.value)
  if (targetBoard) {
    const newTaskId = Date.now() // 简单的ID生成方式
    targetBoard.tasks.push({
      id: newTaskId,
      title: newTask.value.title,
      description: newTask.value.description
    })
    saveToLocalStorage()
  }
  
  showAddForm.value = false
  newTask.value = { title: '', description: '' }
}

const draggedTask = ref(null)

function onDragStart(task) {
  draggedTask.value = task
}

const onDrop = (boardId) => {
  if (!draggedTask.value) return

  boards.value.forEach(board => {
    board.tasks = board.tasks.filter(task => task.id !== draggedTask.value.id)
  })

  const targetBoard = boards.value.find(board => board.id === boardId)
  targetBoard.tasks.push(draggedTask.value)
  draggedTask.value = null
  
  saveToLocalStorage() // 保存拖拽后的状态
}
</script>

<template>
  <div class="kanban">
    <h1>看板</h1>
    
    <div class="board-container">
      <div 
        v-for="board in boards" 
        :key="board.id" 
        class="board"
        @dragover.prevent
        @drop="onDrop(board.id)"
      >
        <div class="board-header">
          <h2>{{ board.title }}</h2>
          <button class="add-button" @click="openAddForm(board.id)">
            + 添加任务
          </button>
        </div>
        
        <div class="task-list">
          <div
            v-for="task in board.tasks"
            :key="task.id"
            class="task"
            draggable="true"
            @dragstart="onDragStart(task)"
          >
            <h3>{{ task.title }}</h3>
            <p>{{ task.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加任务的弹窗 -->
    <div v-if="showAddForm" class="modal-overlay">
      <div class="modal">
        <h3>添加新任务</h3>
        <form @submit.prevent="addTask">
          <div class="form-group">
            <label>标题：</label>
            <input 
              v-model="newTask.title" 
              type="text" 
              required 
              placeholder="请输入任务标题"
            >
          </div>
          <div class="form-group">
            <label>描述：</label>
            <textarea 
              v-model="newTask.description" 
              placeholder="请输入任务描述"
            ></textarea>
          </div>
          <div class="modal-buttons">
            <button type="button" @click="showAddForm = false">取消</button>
            <button type="submit">添加</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.kanban {
  padding: 20px;
}

.board-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.board {
  background: #f4f4f4;
  border-radius: 8px;
  padding: 16px;
  min-width: 250px;
}

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.add-button {
  padding: 4px 8px;
  background: #0052cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-button:hover {
  background: #0047b3;
}

.task-list {
  margin-top: 16px;
}

.task {
  background: white;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: move;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.task:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-buttons button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-buttons button[type="button"] {
  background: #f4f5f7;
}

.modal-buttons button[type="submit"] {
  background: #0052cc;
  color: white;
}

.modal-buttons button:hover {
  opacity: 0.9;
}
</style> 